﻿<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery多皮肤悬浮QQ客服插件fixed - 站长素材</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:13px/1.5 "Microsoft Yahei" }
a{ color:#737373;text-decoration:none;}
a:hover { text-decoration:none; color:#f30;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}

.demo { width:960px; margin:0 auto; padding:100px 50px 0; background-color:#f2f2f2; }
.qhd-desc h2 { margin-bottom:0.8em; }
.qhd-desc h3 { margin-bottom:0.6em; }
.qhd-desc p { margin-bottom:0.5em; }
.demo-copyright { margin-top:100px; text-align:center; }
</style>
<link rel="stylesheet" type="text/css" href="css/service.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fixed.1.5.1.js"></script>
<script language="javascript">
//must window loading,don't use the document loading
$(window).load(function(){
	//皮肤 gray blue yellow green orange white
	//悬浮客服
	$("#fixedBox2").fix({
		position 		: "left",	//悬浮位置 - left或right
		horizontal  	: 0,		//水平方向的位置 - 默认为数字
		vertical    	: null,		//垂直方向的位置 - 默认为null
		halfTop     	: false,	//是否垂直居中位置
		minStatue 		: false,	//是否最小化
		hideCloseBtn 	: false,	//是否隐藏关闭按钮
		skin 			: "gray",	//皮肤
		showBtnWidth 	: 28,       //show_btn_width
		contentBoxWidth : 154, 		//side_content_width
		durationTime 	: 600		//完成时间
	});
	
	//悬浮客服
	$("#fixedBox").fix({
		position 		: "right",	//悬浮位置 - left或right
		horizontal  	: 0,		//水平方向的位置 - 默认为数字
		vertical    	: 100,      //垂直方向的位置 - 默认为null
		halfTop     	: true,	    //是否垂直居中位置
		minStatue 		: true,	    //是否最小化
		hideCloseBtn 	: false,	//是否隐藏关闭按钮
		skin 			: "yellow",	//皮肤
		showBtnWidth 	: 28,       //show_btn_width
		contentBoxWidth : 154, 		//side_content_width
		durationTime 	: 1000		//完成时间
	});
	
});
</script>
</head>

<body>
<div class="demo" style="height:2000px;">        
    
   <center>
  <span style="font-size:15px; font-weight:bold; text-align:center; line-height:25px; color:#000; width:100%"><br>
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p></span>
</center>
</div>


<!-- S 客服 -->
<div class="fixed_box" id="fixedBox">
    <div class="content_box">
        <div class="content_inner">
        	<div class="close_btn"><a title="关闭"><span>关闭</span></a></div>
            <div class="content_title"><span>客服中心</span></div>
            <div class="content_list">            	
                <div class="qqserver">
                    <p>                              
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=168660460&amp;site=qq&amp;menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>       
                    <p>                        
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>             
                </div>               
                <hr>
                <div class="phoneserver">
                    <h5>客户服务热线</h5>
                    <p>请直接QQ联系！</p>
                </div>
                <hr>
                <div class="msgserver">
                    <p><a href="http://qihudong.chinagdcj.cn/feedback/language_zh-CN?jsResource">给我们留言</a></p>
                </div>
            </div>
            <div class="content_bottom"></div>
        </div>
    </div>
    <div class="show_btn"><span>展开客服</span></div>
</div>
<!-- E 客服 -->

<!--  ================================== 分割线 ====================================  -->

<!-- S 客服 -->
<div class="fixed_box" id="fixedBox2">
    <div class="content_box">
        <div class="content_inner">
        	<div class="close_btn"><a title="关闭"><span>关闭</span></a></div>
            <div class="content_title"><span>客服中心</span></div>
            <div class="content_list">            	
                <div class="qqserver">
                    <p>                        
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>  
                </div>               
                <hr>
                <div class="phoneserver">
                    <h5>客户服务热线</h5>
                    <p>请直接QQ联系！</p>
                </div>
                <hr>
                <div class="msgserver">
                    <p><a href="http://sc.chinaz.com/">给我们留言</a></p>
                </div>
            </div>
            <div class="content_bottom"></div>
        </div>
    </div>
    <div class="show_btn"><span>展开客服</span></div>
</div>
<!-- E 客服 -->


</body>
</html>
